import styles from './index.less';
import classNames from 'classnames';

import { InboxOutlined } from '@ant-design/icons';

import { Table, Tooltip ,Divider, Input, Select, Popconfirm, Button, Form, Upload, message } from 'antd';
import React, { useRef } from 'react';
import { Link, useDispatch } from 'umi';
import CommonFooter from '@/components/CommonFooter';

export default function IndexPage() {
    //图片上传
    const { Dragger } = Upload;

    let head=JSON.parse(localStorage.getItem("header") as string)
    const props = {
        name: 'file',
        multiple: true,
        headers:{
            Authorization:head
          },
        action: 'https://creationapi.shbwyz.com/api/file/upload?unique=0',
        onChange(info: { file: { name?: any; status?: any }; fileList: any }) {
            const { status } = info.file;
            if (status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (status === 'done') {
                message.success(`${info.file.name} 上传成功!`);
            } else if (status === 'error') {
                message.error(`${info.file.name} 上传失败`);
            }
        },
        onDrop(e: { dataTransfer: { files: any } }) {
            console.log('Dropped files', e.dataTransfer.files);
        },
    };
    //搜索
    const names: any = useRef<HTMLInputElement>(null)
    const dispatch = useDispatch()
    const columns: any = [
        {
            title: '状态',
            width: 100,
            height: 65,
            dataIndex: 'pass',
            key: 'pass',
            fixed: 'left',
            render: (pass: boolean) => {
                // 渲染是否通过
                return (
                    <span>
                        {pass ? (
                            <span className={styles.green_one}></span>
                        ) : (
                                <span className={styles.red_one}></span>
                            )}
                        {pass ? <span>通过</span> : <span>未通过</span>}
                    </span>
                );
            },
        },
        {
            title: '称呼',
            width: 196,
            height: 65,
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
        },
        {
            title: '联系方式',
            dataIndex: 'email',
            key: '1',
            height: 65,
            width: 196,
        },
        {
            title: '原始内容',
            dataIndex: 'content',
            key: '2',
            width: 160,
            render: (content: any) => {
                return (
                    <Tooltip title={content}>
                        <span style={{ color: '#1890ff' }}>查看内容</span>
                    </Tooltip>
                );
            },
        },
        {
            title: 'HTML内容',
            dataIndex: 'replyUserName',
            key: '3',
            width: 160,
            render: (replyUserName: any) => (
                <Tooltip title={replyUserName}>
                    <span style={{ color: '#1890ff' }}>查看内容</span>
                </Tooltip>
            ),
        },
        {
            title: '管理文章',
            dataIndex: 'address',
            key: '4',
            width: 100,
            render: () => (
                <Tooltip title="address">
                    <a style={{ color: '#1890ff' }}>文章</a>
                </Tooltip>
            ),
        },
        {
            title: '创建时间',
            dataIndex: 'createAt',
            key: '5',
            width: 200,
        },
        {
            title: '父级评论',
            dataIndex: 'address',
            key: '6',
            width: 100,
            render: () => <span>无</span>,
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 196,
            render: () => <span>
                <a >通过</a>
                <Divider type="vertical" />
                <a >拒绝</a>
                <Divider type="vertical" />
                <a >回复</a>
                <Divider type="vertical" />
                <Popconfirm
                    title="确认删除这个评论？"
                    // onConfirm={() => deleteComment(record.id)}
                    okText="确认"
                    cancelText="取消"
                >
                    <a>删除</a>
                </Popconfirm>
            </span>
        },
    ];
    const data: any = []
    return (
        <div className={styles.layout_Content}>
            <header>
                <div className={styles.breadcrumb}>
                    <span>
                        <span>
                            <Link to={'/'}>工作台</Link>
                        </span>
                        <span className={styles.breadcrumb_Separator}>/</span>
                    </span>
                    <span>
                        <span>
                            <Link to={'/poster'}>海报管理</Link>
                        </span>
                        <span className={styles.breadcrumb_Separator}>/</span>
                    </span>
                </div>
                <div style={{ margin: '12px 0 0', color: 'red' }}></div>
            </header>
            <div className={styles.fileOss}>
                <Dragger {...props}>
                    <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                    </p>
                    <p className="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
                    <p className="ant-upload-hint">文件将上传到oss，如未配置请先配置</p>
                </Dragger>
            </div>
            <main className={styles.mains}>
                <div>
                    <Form
                        layout="inline"
                        className={styles.form_controls}
                    >
                        <div className={classNames(styles.ant_row, styles.top)}>
                            <Form.Item label="文件名称" name="Thetitle" labelCol={{ offset: 5 }}>
                                <Input
                                    style={{ width: '254px', padding: ' 4px 11px' }}
                                    placeholder="请输入文件名称"
                                    ref={names}
                                />
                            </Form.Item>
                        </div>
                        <div className={classNames(styles.ant_row, styles.top)}>
                            <div className={styles.ant_btn}>
                                <Button type="primary" onClick={() => {
                                    console.log(names.current.input.value);
                                    let values = names.current.input.value
                                    if (values) {
                                        dispatch({
                                            type: 'comment/getCommentSearch',
                                            payload: {
                                                page: 1,
                                                pageSize: 12,
                                                name: values
                                            },
                                        });
                                    } else {
                                        dispatch({
                                            type: 'comment/getComment',
                                        })
                                    }

                                }}>搜索</Button>
                                <Button style={{ margin: '0 8px' }}>重置</Button>
                            </div>
                        </div>
                    </Form>
                </div>
                <Table
                    className={styles.table}
                    dataSource={data}
                    scroll={{ x: 1500 }}
                />

            </main>
            <div>
                <CommonFooter></CommonFooter>
            </div>
        </div>
    );
}
